<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>Jspreadsheet minimal example </title>

  <!-- jspreadsheet -->
  <script src="./dist/index.js"></script>
 
  <!-- jsuites -->
  <script src="https://jsuites.net/v4/jsuites.js"></script>

  <!-- custom styling -->
  <link rel="stylesheet" href="./dist/jspreadsheet.css" type="text/css" />
  <!-- custom styling -->
  <link rel="stylesheet" href="./dist/jspreadsheet.datatables.css" type="text/css" />
  <!-- custom styling -->
  <link rel="stylesheet" href="./dist/jspreadsheet.theme.css" type="text/css" />



</head>

<body>


 
  <div id="spreadsheet"></div>
</body>

<script src="https://use.fontawesome.com/15661cf560.js"></script>

<script>
  var data = [
      ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
      ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
  ];

  jspreadsheet(document.getElementById('spreadsheet'), {
      data: data,
      columns: [
          { type: 'text', title: 'Car', width: 120 },
          { type: 'dropdown', title: 'Make', width: 200, source: ["Alfa Romeo", "Audi", "Bmw"] },
          { type: 'calendar', title: 'Available', width: 200 },
          { type: 'image', title: 'Photo', width: 120 },
          { type: 'checkbox', title: 'Stock', width: 80 },
          { type: 'numeric', title: 'Price', width: 100, mask: '$ #.##,00', decimal: ',' },
          { type: 'color', width: 100, render: 'square', }
      ]
  });
</script>



</html>